<template>
    <div class="administratorManage">
        <h2 class="my-big-font">操作日志</h2>
        <div class="operationLog">
            <div class="search-inp">
            <div class="item">
                <span class="item-text">用户姓名</span>
                <input
                type="text"
                v-model="uerName"
                placeholder="请输入用户姓名"
                />
            </div>
            <div class="item">
                <span class="item-text">日期</span>
                <el-date-picker
                    v-model="dateValue"
                    type="datetimerange"
                    value-format="timestamp"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="item">
                <div class="search-btn">
                <span class="my-btn my-back-blue" @click="searchClick">筛选</span>
                <span class="my-btn" @click="emptyClick" style='margin-left:20px'>清空</span>
                </div>
            </div>
            </div>
            <div class="table">
                <el-table :data="merchantsData" stripe border style="width: 100%">
                    <el-table-column type='index' width='100' label="序号"></el-table-column>
                    <el-table-column prop="userName" label="用户名称"></el-table-column>
                    <el-table-column prop="operate"  label="用户操作" width='400'></el-table-column>
                    <el-table-column  prop="createTime" label="操作时间"></el-table-column>
                    <el-table-column  prop="ip" label="操作ip"></el-table-column>
                    <el-table-column  prop="shopName" label="商品名称"></el-table-column>
                    <el-table-column  prop="pname" label="品牌名称"></el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
        uerName:'',//用户姓名
        dateValue:'',//日期
        currentPage4: 1, //跳转到第几页
        page:1,
        pageSize:5,
        total:0,
        merchantsData:[]
    };
  },
  mounted() {
      this.getmerchantsData()
  },
  methods: {
    //筛选
    searchClick(){
        this.page=1
        this.getmerchantsData()
    },
    //清空
    emptyClick(){
        this.uerName='',//用户姓名
        this.dateValue=''//日期
        this.getmerchantsData()
    },
    //获取数据
    getmerchantsData() {
        var param={
            page:this.page,
            limit:this.pageSize,
            userName:'',
            startTime:'',
            endTime:''
        }
        if(this.uerName){
            param.userName=this.uerName
        }
        if(this.dateValue.length==2){
            param.startTime=this.dateValue[0]/1000
            param.endTime=this.dateValue[1]/1000
        }
       this.axios({
        url: '/recharge/sys/log/getAll?page='+param.page+'&limit='+param.limit+'&userName='+param.userName+'&startTime='+param.startTime+'&endTime='+param.endTime,
        method: "post",
      }).then((res) => {
        this.merchantsData = res.data.data.data;
        this.merchantsData.forEach(e=>{
            e.createTime=this. format(e.createTime)
        })
        this.total=res.data.data.count
      });
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getmerchantsData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getmerchantsData();
    },
    //处理时间戳
    format(shijianchuo) {
        if(shijianchuo){
            var time = new Date(parseInt(shijianchuo)*1000);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var f = time.getMinutes();
            var s = time.getSeconds();
            //想要什么格式可以自己改
            // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
        }
    },
    //小于10的时候，前边加0（08：08：12）
    add0(m) {
        return m < 10 ? '0' + m : m
    },
  },
    watch:{
        dateValue(){
            this.getmerchantsData()
        }
    },
};
</script>
<style scoped>
.administratorManage{
    padding: 30px 82px 50px 30px;
    background: #fff;
    margin: 10px 0 0 10px;
    color: #333333;
    min-height: calc(100vh - 96px);
    position: relative;
}
.administratorManage h2{
    padding-top: 0;
}
/* 搜索 */
/* 搜索input框 */
.search-inp {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.search-inp .item {
  margin-bottom: 40px;
}
.search-inp .item input{
    border: 1px solid #DCDFE6;
    outline: 0;
    height: 36px;
    border-radius: 3px;
    padding-left: 10px;
}
.search-inp .item-text {
  width: 100px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
.my-btn{
    width: 70px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #eee;
    padding: 0px 14px;
    font-size: 15px;
    margin-left: 30px;
    margin-right: 0px;
}
.my-back-blue{
  color: #fff;
  background: #007bff;
}
</style>